<template>
	<view class="content">
		<view class="list">
			<view v-for="(it, i) in data" :key="i">
				<!-- #ifdef MP-WEIXIN -->
				<tui-section
					:title="it.key" 
					:margin="i > 0 ? '30rpx 0 0' : ''"
					:size="32"
					is-line 
					background="#fff"></tui-section>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<tui-section
					:title="it.key" 
					:margin="'30rpx 0 0'"
					:size="32"
					is-line 
					background="#fff"></tui-section>
				<!-- #endif -->
				<view 
					v-for="(item, index) in it.data"
					:key="index"
					class="item box">
					<view class="item-top">
						<image 
							class="avatar" 
							:src="baseHttpUrl + item.img"
							mode="aspectFill"></image>
						<view class="title">{{ item.title }}</view>
					</view>
					<view class="item-default">
						<tui-grid>
							<tui-grid-item>
						 		<text class="label">毛坯：</text>
						 		<text class="price" :style="{color: colors.danger}">￥{{ item.mp_price }}</text>
						 	</tui-grid-item>
							<tui-grid-item>
						 		<text class="label">成品：</text>
								<text class="price" :style="{color: colors.danger}">￥{{ item.cp_price }}</text>
						 	</tui-grid-item>
							<tui-grid-item>
						 		<text class="label">烫发：</text>
								<text class="price" :style="{color: colors.danger}">￥{{ item.tf_price }}</text>
						 	</tui-grid-item>
						</tui-grid>
					</view>
					<view class="item-inner">
						<view v-for="(_item, _index) in item.images" :key="_index" class="hair">
							<image
								@click="preview(_index, item.images)"
								:src="baseHttpUrl + _item"
								class="img"
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="item-btns">
						<tui-button @click="seeSize(item)" plain>查看尺寸</tui-button>
					</view>
				</view>
			</view>
		</view>
		
		<tui-bottom-popup 
			:zIndex="1002" 
			:maskZIndex="1001" 
			:show="popupShow" 
			@close="popupShow = !popupShow">
			<view class="sizes">
				<view class="sizes-title">规格尺寸</view>
				<view class="sizes-inner">
					<view class="inner">
						<view v-for="(item, index) in sizes" :key="index" class="btn">
							<tui-button
								width="140rpx" 
								height="60rpx"
								plain>{{ item.text }}</tui-button>
						</view>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	import hairData from '../../common/hair-data.json'
	export default {
		data() {
			return {
				popupShow: false,
				scrollTop: 100,
				baseHttpUrl: this.ENUM.BASE_URL,
				colors: uni.$tui.color,
				data: [],
				sizes: []
			}
		},
		onLoad() {
			this.data = hairData
		},
		methods: {
			preview(index, data) {
				let urls = []
				data.forEach(item => {
					urls.push(this.baseHttpUrl + item)
				})
				uni.previewImage({
					current: index,
					urls,
					indicator: 'number',
					longPressActions: {
						success: function(data) {
							console.log(data)
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			seeSize(data) {
				console.log(data)
				this.sizes = data.sizes
				this.popupShow = true
			},
		},
		onPageScroll(e) {
		 	this.scrollTop = e.scrollTop
		}
	}
</script>

<style lang="scss">
$num-default: 30rpx;
.m-t-30 {
	margin-top: $num-default;
}
.content {
	padding: 0 $num-default $num-default;
}
.box {
	background-color: #fff;
	border-radius: 16rpx;
	margin-top: $num-default;
}
.tui-grid {
	padding: 30rpx 24rpx;
}
.list {
	.item {
		&-top {
			display: flex;
			align-items: center;
			padding: $num-default;
			.avatar {
				width: 80rpx;
				height: 80rpx;
				object-fit: cover;
				border-radius: 50%;
				margin-right: $num-default;
			}
			.title {
				font-size: 32rpx;
			}
		}
		&-inner {
			display: flex;
			flex-wrap: wrap;
			padding-left: 10rpx;
			.hair {
				width: calc(33.3% - 5px);
				display: flex;
				margin: 10rpx 10rpx 0 0;
			}
			.img {
				width: 100%;
				height: 300rpx;
				object-fit: cover;
				border-radius: 8rpx;
			}
		}
		&-default {
			font-size: 30rpx;
			.price {
				font-weight: bold;
			}
		}
		&-btns {
			padding: $num-default;
		}
	}
}
.sizes {
	&-title {
		font-size: 32rpx;
		padding: $num-default;
	}
	&-inner {
		min-height: 30vh;
		max-height: 60vh;
		padding-bottom: 40rpx;
		overflow-y: auto;
		.inner {
			display: flex;
			flex-wrap: wrap;
			padding: 0 $num-default;
		}
	}
	.btn {
		height: 60rpx;
		margin: 0 $num-default $num-default 0;
	}
}
</style>
